<template>
    <view class="bg-[#F8F8F8] min-h-screen">
        <view class="mt-[20rpx] px-[40rpx] text-[30rpx] font-medium bg-white pb-[60rpx]">
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>姓名:</text>
                <input v-model="name" class="ml-[30rpx] " type="text" placeholder="请填写真实姓名">
            </view>
            <view  @click="sexShow = true" class="py-[34rpx] flex items-center border-b border-[#EFEFEF] w-full">
                <text>性别:</text>
                <input :disabled="true" v-model="sex" class="ml-[30rpx] flex-1 " type="text" placeholder="请选择性别">
                <u-picker @confirm="sexConfirm" @close="sexShow = false" :show="sexShow" :columns="columns"></u-picker>
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view @click="show = true" class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>出生日期:</text>
                <input :disabled="true" v-model="birthDate" class="ml-[30rpx] flex-1 " type="text"
                    placeholder="请选择出生日期">
                <u-datetime-picker @cancel="show = false" minDate="1950-01-01" :show="show" @confirm="birthDateChange"
                    v-model="value1" mode="date"></u-datetime-picker>

                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>专业课类别:</text>
                <input v-model="major" class="ml-[30rpx] flex-1 " type="text" placeholder="请输入专业类别">
                <!-- <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon> -->
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>政治面貌:</text>
                <input v-model="political" class="ml-[30rpx] flex-1 " type="text" placeholder="请选择政治面貌">
                <!-- <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon> -->
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>联系方式:</text>
                <input v-model="contact" class="ml-[30rpx] flex-1 " type="number" placeholder="请输入联系方式">
                
            </view>
            <view class="py-[34rpx]   w-full">
                <view>专业简历:</view>
                <textarea v-model="resume" class="mt-[16rpx] bg-[#EFEFEF] w-full rounded" type="text"></textarea>
                
            </view>
        
            <view class="mt-[105rpx] flex justify-center">
                <view @click="submit"
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    确定</view>
            </view>
        </view>
        <u-popup :show="successful" @close="successful = false" mode="center" round="12" :safeAreaInsetBottom="false">
            <view class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
                <u-icon name="weixin-circle-fill" color="#28C445" size="57"></u-icon>

                <view @click="bindWechat" class="mt-[32rpx] text-[#FD755D] text-[38rpx] font-bold">绑定微信>></view>
                <view class="mt-[126rpx] flex justify-center">
                    <view @click="goIndex"
                        class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                        取消</view>
                </view>
            </view>

        </u-popup>
    </view>
</template>
<script setup>

import api from "@/api/api"
import { ref, reactive } from 'vue'
const columns = ref([["男", "女"]])
const sex = ref("")
const sexShow = ref(false)
const successful= ref(false)
const show = ref(false)
const value1 = ref(new Date())
const birthDate = ref("")
const name = ref("")
const major = ref("")
const political = ref("")
const contact = ref("")
const resume = ref("")
const sexConfirm = (e) => {
    sex.value = e.value[0]
    sexShow.value = false
}
const birthDateChange = (e) => {
    const date = new Date(e.value);

    // 获取年份
    const year = date.getFullYear();
    // 获取月份（注意：getMonth() 返回值是 0 - 11，所以要加 1）
    const month = String(date.getMonth() + 1).padStart(2, '0');
    // 获取日期
    const day = String(date.getDate()).padStart(2, '0');

    // 组合成年月日格式
    birthDate.value = `${year}-${month}-${day}`;
    show.value = false
}
const submit = async() => {
    uni.showLoading({ title: "加载中" })
     const res = await api.teacherSave({
        name:name.value, 
        gender:sex.value, 
        birthDate:birthDate.value, 
        major:major.value, 
        political:political.value, 
        contact:contact.value, 
        resume:resume.value
     })
     if(res.code == 200){
        uni.hideLoading()
        successful.value = true
     }
   
}
const goIndex = () => {
    uni.switchTab({
        url: '/pages/my/my'
    })
}
const bindWechat = () => {
    uni.showLoading({ title: "加载中" })
    uni.login({
        success: (res) => {
            api.wechatBind({
                code: res.code
            }).then(ret=>{
                if(ret.code==200){
                    uni.showLoading({ title: "绑定成功" })
                    const timer =   setTimeout(() => {
                        uni.hideLoading()
                        goIndex()
                        clearTimeout(timer)
                    }, 1000);
                }else{
                    uni.showToast({ title: ret.msg, icon: "none" })
                }
            })

          
          
        }
    })
  
}
</script>